<!--
  Copyright (C) 2009-2010 the original author or authors.
  See the notice.md file distributed with this work for additional
  information regarding copyright ownership.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<html>
  <!-- Author: Hiram Chirino <hiram@hiramchirino.com> -->
  <head>
    
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> 
    <script language="javascript" type="text/javascript" src="./resources/jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="./resources/jquery.flot.js"></script> 
    <script language="javascript" type="text/javascript" src="./resources/jquery.flot.crosshair.js"></script> 
  	
    <script type='text/javascript'>
      
      //
      // Update the following array to add more
      // mqtt servers to the comparison 
      //
      var products = [
         "apollo-1.1-SNAPSHOT", "mosquitto-0.15"
      ];

      var broker_samples = [];
      var scenarios = new Object();

      var legend_update_timeout = null;
      var legend_updates = {};
      function with_commas(nStr)
      {
        nStr += '';
        x = nStr.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
          x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        return x1 + x2;
      }
      function trigger_legend_update(event, pos, item) {
        var state = $(this).data('chart_state');
        legend_updates[$(this).attr('id')] = state
        if( pos ) {
          state.latestPosition =  state.plot.p2c(pos);
          state.latestPosition.pageX = pos.pageX;
          state.latestPosition.pageY = pos.pageY;
        } else {
          state.latestPosition =  null;
        }
        if (!legend_update_timeout) {
          legend_update_timeout = setTimeout(legend_update, 50);
        }
      }

      function legend_update() {
        var hide_legend = true;
        var legend_div = $('#legend')
        var legend_labels = legend_div.find(".legendLabel");
        
        for( chart in legend_updates ) {
          var state = legend_updates[chart];
          var pos = state.latestPosition ? state.plot.c2p(state.latestPosition) : null;
          var plot = state.plot;
          
          if( !plot ) {
            continue;
          }
          var axes = plot.getAxes();
          if (pos==null || pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
            continue;
          }
          
          var i, j, dataset = plot.getData();
          for (i = 0; i < dataset.length; ++i) {
            var series = dataset[i];

            // find the nearest points, x-wise
            for (j = 0; j < series.data.length; ++j)
              if (series.data[j][0] > pos.x)
                break;

            // now interpolate
            var y, p1 = series.data[j - 1], p2 = series.data[j];
            if (p1 || p2) {
              if (p1 == null)
                  y = p2[1];
              else if (p2 == null)
                  y = p1[1];
              else
                  y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);

              if( !series.original ) {
                series.original = series.label;
              }
              if( y < 100 ) {
                y = y.toFixed(3)
              } else {
                y = y.toFixed(0)
              }
              legend_labels.eq(i).text(series.original + " = "+with_commas(y)+" "+state.units);
            } else {
              legend_labels.eq(i).text(series.original + " = N/A");
            }
            
          }
          
          hide_legend = false;
          legend_div.css({
            position: 'absolute',
            display: 'block',
            top: state.latestPosition.pageY + 5,
            left: state.latestPosition.pageX + 5,
            padding: "10px",
            'z-index':1,
            opacity: .8,
            background: '#F0FAFF', 
            'border-radius': '8px', 
            '-webkit-border-radius': '8px',
            '-moz-border-radius': '8px'
            });
        }
        if( hide_legend ) {
          legend_div.css('display', 'none');
        }
        legend_update_timeout = null;
        legend_updates = {}
      }


      function line_chart(scenario) {
        $(document.getElementById(scenario)).each(function(){
          var units = "msg/sec";
          if( scenario.indexOf("p9")==0 ) {
            var units = "ms";
          }
          var options = {
              legend: {
                container: $('#legend'),
                show: true
              },
              series: {
                lines: { show: true }
              },
              yaxis: {
                min:0,
                tickFormatter: function(y, axis) {
                  return with_commas(y.toFixed(axis.tickDecimals));
                }
              },              
              crosshair: { mode: "x" },
              lines: { show: true },
              grid: { hoverable: true, autoHighlight: false }
            };
        
          var data_lines = [];
          for(i in broker_samples) {
            if (broker_samples[i].benchmark_settings) {
                var benchmark_settings = broker_samples[i].benchmark_settings;
                try {
                  var data = [];
                  if( broker_samples[i][scenario] !=null ) {
                    var first_ts = null;
                    var samples = broker_samples[i][scenario];
                    for( j in samples ) {
                      var sample = samples[j]
                      if( sample instanceof Array ) {
                        if( first_ts == null ) {
                          first_ts = sample[0];
                        }
                        if( scenario.indexOf("p9")==0 ) {
                          sample[1] = sample[1] / 1000000.0
                        }
                        data.push([(sample[0]-first_ts)/1000, sample[1]]);
                      } else {
                        data.push([(benchmark_settings.sample_interval*j)/1000, sample]);
                      }
                    }
                  }
                  var line = {label: benchmark_settings.broker_name, data:data };
                  data_lines.push(line);
                } catch(ignore){
                  alert(ignore);
                }
            } else {
                try {
                  var data = [];
                  if( broker_samples[i][scenario] !=null ) {
                    var first_ts = null;
                    var samples = broker_samples[i][scenario];
                    for( j in samples ) {
                      var sample = samples[j]
                      if( first_ts == null ) {
                        first_ts = sample[0];
                      }
                      data.push([(sample[0]-first_ts)/1000, sample[1]]);
                    }
                  }
                  var line = {label: "Test Platform", data:data };
                  data_lines.push(line);
                } catch(ignore){
                  alert(ignore);
                }
            }
          }
          var placeholder = $(this)
          var state = {
             units: units,
             plot: $.plot(placeholder, data_lines, options),
             placeholder:placeholder,
             latestPosition:null
          }
          placeholder.data('chart_state', state);
          $(this).bind("plothover",  trigger_legend_update);
          $(this).mouseout(trigger_legend_update);
        });
      }
      
      function load_charts() {
        
        // Clear out the previous charts...
        for( scenario in scenarios ) {
          var div = document.getElementById(scenario);
          if( div!=null ) {
           div.innerHTML = "";
          }
        }
        
        // Load the new charts.
        broker_samples = [];
        scenarios = new Object();
        
        for(i in products) {
          var file = products[i]+".json";
          $.ajax({ context:{i:i},  url: file, dataType: "json", async:true, success: function(data) {
            var i = this.i;
            if( typeof data == 'string' ) {
              broker_samples[i] = $.parseJSON( data );
            } else {
              broker_samples[i] = data;
            }
            
            if (broker_samples[i].benchmark_settings) {
                for( scenario in broker_samples[i] ) {
                  if( scenario != "benchmark_settings") {
                    scenarios[scenario] = true;
                  }
                }
            } else {
                // Parse the new JSON format
                for( group_idx in broker_samples[i].groups ) {
                    for( scenario_idx in broker_samples[i].groups[group_idx].scenarios ) {
                        scenario = broker_samples[i].groups[group_idx].scenarios[scenario_idx];
                        function get_scenario_data(s) {
                            if (s.clients) {
                                for( client_idx in s.clients ){
                                    client = s.clients[client_idx];
                                    if (client.data.publishers.length > 0) {
                                        scenario_name = 'p_'+client.name; 
                                        scenarios[scenario_name] = true;
                                        broker_samples[i][scenario_name] = client.data.producers;
                                    }
                                    if (client.data.consumers.length > 0) {
                                        scenario_name = 'c_'+client.name; 
                                        scenarios[scenario_name] = true;
                                        broker_samples[i][scenario_name] = client.data.consumers;
                                    }
                                    if (client.data.error.length > 0) {
                                        scenario_name = 'e_'+client.name;
                                        scenarios[scenario_name] = true;
                                        broker_samples[i][scenario_name] = client.data.error;
                                    }
                                }
                            } else {
                                for( s_idx in s ) {
                                    get_scenario_data(s[s_idx]); 
                                }
                            }
                        };
                        get_scenario_data(scenario);
                    }
                }
            }
            if(broker_samples.length == products.length) {
              for( scenario in scenarios ) {
                try {
                  line_chart(scenario);
                } catch(e) {
                  alert("Could not display chart for "+scenario+" due to "+e);
                }
              }
            }
          }});
        }
        
      }
      
      $(function () { load_charts(); });
    </script>
    
    <style type='text/css'>
      body { font-family:Verdana; font-size:12px; color:#666666; }
      td { font-size:12px; }
      #header {
        margin: 0; padding: 2em; text-align:center; background: #baccd8;
        border-radius: 8px; -webkit-border-radius: 8px;  -moz-border-radius: 8px;
      }
      #header h1 {
        margin: 0; padding: 0; font-size: 180%; line-height: 1em; color: #333;
      }
      #wrap {
        margin: 0 auto; padding: 2em;
      }
      #content { padding: 2em;  }      
      .block { background: #baccd8; height:2em;
        border-radius: 8px; -webkit-border-radius: 8px;  -moz-border-radius: 8px;
        }
      .r90 { 
        width:2em; height:auto; white-space:nowrap;
        
        -webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      }
      
      .chart-title {
        float: left;
        position: relative;
        z-index: 1;
        margin: .7em;
      }
      .small-chart {
        margin: 3em 5px 5px 5px;
        width:200px;height:150px;
      }
      
      table.padded { width: 10px; }
      .padded td { padding: 20px; }
      .charts { padding-left: 30px; }
      .chart-section { clear:both; margin-top: 1em; padding-left:2em; }
      .overview { padding: 0 2em; }
      .clear { clear:both; }
      h2 { margin-top:30px;}
    </style>
  </head>
  <body>
    
    <div id='wrap'>
      <div id='header'>
        <h1>MQTT Server Performance Comparisons</h1>
      </div>
      <div id='content'>
        <h2>Table of Contents</h2>
        <ol>
          <li><a href="#throughput_to_topic">Throughput to an Unsubscribed Topic</a></li>
          <li><a href="#queue_load_unload">Queue Load/Unload</a></li>
          <li><a href="#partitioned_load">Partitioned Load Scenarios</a></li>
          <li><a href="#fan_in_out_load">Fan In/Out Load Scenarios</a></li>
          <li><a href="#request_reply">Request/Reply Scenarios</a></li>
        </ol>
        
        <h2 id="throughput_to_topic">Overview</h2>
        <p>
          This report was generated using the <a href="http://github.com/chirino/mqtt-benchmark">mqtt-benchmark tool</a>.  It 
          provides a comparative benchmark of messaging servers that implement the <a href="http://mqtt.github.com/mqtt-specification-1-0.html">MQTT 1.0</a> 
          specification.  It covers a wide variety of common usage scenarios. Each scenario is warmed up for 3 seconds before the performance samples are taken.
        </p>
        
        <div style="padding: 0em 1em 0em 3em;">
          <div id="server-info">
          </div>
          
  <h2>Console logs of the benchmarked servers</h2>
  <ul>
  <li><a href=apollo-1.1-SNAPSHOT.log>apollo-1.1-SNAPSHOT.log</a></li>
  <li><a href=mosquitto-0.15.log>mosquitto-0.15.log</a></li>
  </ul>
        </div>
        <script>
        $(function() {
          $.ajax({ url: "server-info.html", dataType: "html", async:true, success: function(data) {
            $('#server-info').html(data);
          }});
        });
        </script>          
        <div style="display:none" id="legend"></div>
        <h2 id="throughput_to_topic">Throughput to an Unsubscribed Topic</h2>
        <p>
          A single publisher sending non-persistent messages to a topic that does not have an subscribers attached.
        </p>
        <div style="padding:1em;">
          <span class="block" style="padding:1em;"><strong>NOTE:</strong> hover over the graphs to see the legends.</span>
        </div>
        <table class="charts padded">
          <tr>
            <td>
              <h3>With a 20 b Playload</h3>
              <div id='p_pt_20b:(1 * clean qos0)->[1]' style="width:300px;height:150px;"><img src="./resources/ajax-loader.gif"></div>
            </td>
            <<td>
              <h3>With a 1 k Playload</h3>
              <div id='p_pt_1k:(1 * clean qos0)->[1]' style="width:300px;height:150px;"><img src="./resources/ajax-loader.gif"></div>
            </td><td>
              <h3>With a 256 k Playload</h3>
              <div id='p_pt_256k:(1 * clean qos0)->[1]' style="width:300px;height:150px;"><img src="./resources/ajax-loader.gif"></div>
            </td> 
          </tr>
        </table>

        <h2 id="queue_load_unload">Client Session/Subscription Load/Unload</h2>
        <table class="charts padded">
          <tr>
            <td>
              <h3>Loading</h3>
              <p>
                A publisher on a clean session is sending messages with 20 byte payloads to 
                with 1 subscribed non-clean session which is not currently connected.
              </p>
              <h4>QoS 0 Publish</h4>
              <div id='p_load_20b:(1 * clean qos0)->[1]' style="width:300px;height:150px;"><img src="./resources/ajax-loader.gif"></div>
              <h4>QoS 1 Publish</h4>
              <div id='p_load_20b:(1 * clean qos1)->[1]' style="width:300px;height:150px;"><img src="./resources/ajax-loader.gif"></div>
              <h4>QoS 2 Publish</h4>
              <div id='p_load_20b:(1 * clean qos2)->[1]' style="width:300px;height:150px;"><img src="./resources/ajax-loader.gif"></div>
            </td><td>
              <h3>Unloading</h3>
              <p>
                The non-clean session client then reconnects and starts receiving the messages 
                previously sent to the subscription but now the publisher has stopped.
              </p>
              <h4>QoS 0 Subscribe</h4>
              <div id='c_load_20b:[1]->(1 * dirty qos0)' style="width:300px;height:150px;"><img src="./resources/ajax-loader.gif"></div>
              <h4>QoS 1 Subscribe</h4>
              <div id='c_load_20b:[1]->(1 * dirty qos1)' style="width:300px;height:150px;"><img src="./resources/ajax-loader.gif"></div>
              <h4>QoS 2 Subscribe</h4>
              <div id='c_load_20b:[1]->(1 * dirty qos2)' style="width:300px;height:150px;"><img src="./resources/ajax-loader.gif"></div>
            </td>
          </tr>
        </table>
        
        <h2 id="fan_in_out_load">Fan In/Out Load Scenarios</h2>
        <p>
          These scenarios multiple subscribers and publishers communicate via one shared topic.  
          All messages sent have a 20 byte payload.
        </p>
        <table class="charts">
          <tr><th>&nbsp;</th><th class="block">Clean</th><th class="block">Non-Clean</th></tr>
          <tr><th class="block"><div class="r90">QoS 0</div></th><td>
            <table>
              <tr><th>&nbsp;</th><th class="block">1 Producer</th><th class="block">5 Producers</th><th class="block">10 Producers</th></tr>
              <tr><th class="block"><div class="r90">1 Consumer</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">5 Consumers</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * clean qos0)->[1]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * clean qos0)->[1]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * clean qos0)->[1]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * clean qos0)->[1]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * clean qos0)->[1]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * clean qos0)->[1]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">10 Consumers</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * clean qos0)->[1]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * clean qos0)->[1]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * clean qos0)->[1]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * clean qos0)->[1]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * clean qos0)->[1]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * clean qos0)->[1]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
            </table>
          </td><td>
            <table>
              <tr><th>&nbsp;</th><th class="block">1 Producer</th><th class="block">5 Producers</th><th class="block">10 Producers</th></tr>
              <tr><th class="block"><div class="r90">1 Consumer</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">5 Consumers</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * dirty qos0)->[1]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * dirty qos0)->[1]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * dirty qos0)->[1]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * dirty qos0)->[1]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * dirty qos0)->[1]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * dirty qos0)->[1]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">10 Consumers</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * dirty qos0)->[1]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * dirty qos0)->[1]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * dirty qos0)->[1]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * dirty qos0)->[1]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * dirty qos0)->[1]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * dirty qos0)->[1]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
            </table>
          </td></tr>
          <tr><th class="block"><div class="r90">QoS 1</div></th><td>
            <table>
              <tr><th>&nbsp;</th><th class="block">1 Producer</th><th class="block">5 Producers</th><th class="block">10 Producers</th></tr>
              <tr><th class="block"><div class="r90">1 Consumer</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * clean qos1)->[1]->(1 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * clean qos1)->[1]->(1 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * clean qos1)->[1]->(1 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * clean qos1)->[1]->(1 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * clean qos1)->[1]->(1 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * clean qos1)->[1]->(1 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">5 Consumers</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * clean qos1)->[1]->(5 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * clean qos1)->[1]->(5 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * clean qos1)->[1]->(5 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * clean qos1)->[1]->(5 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * clean qos1)->[1]->(5 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * clean qos1)->[1]->(5 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">10 Consumers</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * clean qos1)->[1]->(10 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * clean qos1)->[1]->(10 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * clean qos1)->[1]->(10 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * clean qos1)->[1]->(10 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * clean qos1)->[1]->(10 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * clean qos1)->[1]->(10 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
            </table>
          </td><td>
            <table>
              <tr><th>&nbsp;</th><th class="block">1 Producer</th><th class="block">5 Producers</th><th class="block">10 Producers</th></tr>
              <tr><th class="block"><div class="r90">1 Consumer</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * dirty qos1)->[1]->(1 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * dirty qos1)->[1]->(1 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * dirty qos1)->[1]->(1 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * dirty qos1)->[1]->(1 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * dirty qos1)->[1]->(1 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * dirty qos1)->[1]->(1 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">5 Consumers</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * dirty qos1)->[1]->(5 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * dirty qos1)->[1]->(5 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * dirty qos1)->[1]->(5 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * dirty qos1)->[1]->(5 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * dirty qos1)->[1]->(5 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * dirty qos1)->[1]->(5 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">10 Consumers</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * dirty qos1)->[1]->(10 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * dirty qos1)->[1]->(10 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * dirty qos1)->[1]->(10 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * dirty qos1)->[1]->(10 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * dirty qos1)->[1]->(10 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * dirty qos1)->[1]->(10 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
            </table>
          </td></tr>
          <tr><th class="block"><div class="r90">QoS 2</div></th><td>
            <table>
              <tr><th>&nbsp;</th><th class="block">1 Producer</th><th class="block">5 Producers</th><th class="block">10 Producers</th></tr>
              <tr><th class="block"><div class="r90">1 Consumer</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * clean qos2)->[1]->(1 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * clean qos2)->[1]->(1 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * clean qos2)->[1]->(1 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * clean qos2)->[1]->(1 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * clean qos2)->[1]->(1 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * clean qos2)->[1]->(1 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">5 Consumers</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * clean qos2)->[1]->(5 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * clean qos2)->[1]->(5 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * clean qos2)->[1]->(5 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * clean qos2)->[1]->(5 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * clean qos2)->[1]->(5 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * clean qos2)->[1]->(5 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">10 Consumers</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * clean qos2)->[1]->(10 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * clean qos2)->[1]->(10 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * clean qos2)->[1]->(10 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * clean qos2)->[1]->(10 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * clean qos2)->[1]->(10 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * clean qos2)->[1]->(10 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
            </table>
          </td><td>
            <table>
              <tr><th>&nbsp;</th><th class="block">1 Producer</th><th class="block">5 Producers</th><th class="block">10 Producers</th></tr>
              <tr><th class="block"><div class="r90">1 Consumer</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * dirty qos2)->[1]->(1 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * dirty qos2)->[1]->(1 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * dirty qos2)->[1]->(1 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * dirty qos2)->[1]->(1 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * dirty qos2)->[1]->(1 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * dirty qos2)->[1]->(1 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">5 Consumers</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * dirty qos2)->[1]->(5 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * dirty qos2)->[1]->(5 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * dirty qos2)->[1]->(5 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * dirty qos2)->[1]->(5 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * dirty qos2)->[1]->(5 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * dirty qos2)->[1]->(5 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">10 Consumers</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_fan_20b:(1 * dirty qos2)->[1]->(10 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_fan_20b:(1 * dirty qos2)->[1]->(10 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(5 * dirty qos2)->[1]->(10 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(5 * dirty qos2)->[1]->(10 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_fan_20b:(10 * dirty qos2)->[1]->(10 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_fan_20b:(10 * dirty qos2)->[1]->(10 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
            </table>
          </td></tr>
        </table>
        
        <h2 id="partitioned_load">Partitioned Load Scenarios</h2>
        <p>
          These scenarios sample performance as partitioned load is applied.  
          Each topic only has 1 and only 1 publisher and subscriber attached.
        </p>
        <table class="charts">
          <tr><th>&nbsp;</th><th class="block">Clean</th><th class="block">Non Clean</th></tr>
          <tr><th class="block"><div class="r90">QoS 0</div></th><td>
            <table>
              <tr><th>&nbsp;</th><th class="block">20 b Message</th><th class="block">1 k Message</th><th class="block">256 k Message</th></tr>
              <tr><th class="block"><div class="r90">1x1x1</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_20b:(1 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_20b:(1 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_20b:(5 * clean qos0)->[5]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_20b:(5 * clean qos0)->[5]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_20b:(10 * clean qos0)->[10]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_20b:(10 * clean qos0)->[10]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">5x5x5</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_1k:(1 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_1k:(1 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_1k:(5 * clean qos0)->[5]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_1k:(5 * clean qos0)->[5]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_1k:(10 * clean qos0)->[10]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_1k:(10 * clean qos0)->[10]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">10x10x10</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_256k:(1 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_256k:(1 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_256k:(5 * clean qos0)->[5]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_256k:(5 * clean qos0)->[5]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_256k:(10 * clean qos0)->[10]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_256k:(10 * clean qos0)->[10]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>

            </table>
          </td><td>
            <table>
              <tr><th>&nbsp;</th><th class="block">20 b Message</th><th class="block">1 k Message</th><th class="block">256 k Message</th></tr>
              <tr><th class="block"><div class="r90">1x1x1</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_20b:(1 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_20b:(1 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_20b:(5 * dirty qos0)->[5]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_20b:(5 * dirty qos0)->[5]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_20b:(10 * dirty qos0)->[10]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_20b:(10 * dirty qos0)->[10]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">5x5x5</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_1k:(1 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_1k:(1 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_1k:(5 * dirty qos0)->[5]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_1k:(5 * dirty qos0)->[5]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_1k:(10 * dirty qos0)->[10]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_1k:(10 * dirty qos0)->[10]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">10x10x10</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_256k:(1 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_256k:(1 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_256k:(5 * dirty qos0)->[5]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_256k:(5 * dirty qos0)->[5]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_256k:(10 * dirty qos0)->[10]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_256k:(10 * dirty qos0)->[10]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
            </table>
          </td></tr>
          <tr><th class="block"><div class="r90">QoS 1</div></th><td>
            <table>
              <tr><th>&nbsp;</th><th class="block">20 b Message</th><th class="block">1 k Message</th><th class="block">256 k Message</th></tr>
              <tr><th class="block"><div class="r90">1x1x1</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_20b:(1 * clean qos1)->[1]->(1 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_20b:(1 * clean qos1)->[1]->(1 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_20b:(5 * clean qos1)->[5]->(5 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_20b:(5 * clean qos1)->[5]->(5 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_20b:(10 * clean qos1)->[10]->(10 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_20b:(10 * clean qos1)->[10]->(10 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">5x5x5</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_1k:(1 * clean qos1)->[1]->(1 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_1k:(1 * clean qos1)->[1]->(1 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_1k:(5 * clean qos1)->[5]->(5 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_1k:(5 * clean qos1)->[5]->(5 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_1k:(10 * clean qos1)->[10]->(10 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_1k:(10 * clean qos1)->[10]->(10 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">10x10x10</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_256k:(1 * clean qos1)->[1]->(1 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_256k:(1 * clean qos1)->[1]->(1 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_256k:(5 * clean qos1)->[5]->(5 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_256k:(5 * clean qos1)->[5]->(5 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_256k:(10 * clean qos1)->[10]->(10 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_256k:(10 * clean qos1)->[10]->(10 * clean qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>

            </table>
          </td><td>
            <table>
              <tr><th>&nbsp;</th><th class="block">20 b Message</th><th class="block">1 k Message</th><th class="block">256 k Message</th></tr>
              <tr><th class="block"><div class="r90">1x1x1</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_20b:(1 * dirty qos1)->[1]->(1 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_20b:(1 * dirty qos1)->[1]->(1 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_20b:(5 * dirty qos1)->[5]->(5 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_20b:(5 * dirty qos1)->[5]->(5 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_20b:(10 * dirty qos1)->[10]->(10 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_20b:(10 * dirty qos1)->[10]->(10 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">5x5x5</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_1k:(1 * dirty qos1)->[1]->(1 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_1k:(1 * dirty qos1)->[1]->(1 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_1k:(5 * dirty qos1)->[5]->(5 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_1k:(5 * dirty qos1)->[5]->(5 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_1k:(10 * dirty qos1)->[10]->(10 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_1k:(10 * dirty qos1)->[10]->(10 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">10x10x10</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_256k:(1 * dirty qos1)->[1]->(1 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_256k:(1 * dirty qos1)->[1]->(1 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_256k:(5 * dirty qos1)->[5]->(5 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_256k:(5 * dirty qos1)->[5]->(5 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_256k:(10 * dirty qos1)->[10]->(10 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_256k:(10 * dirty qos1)->[10]->(10 * dirty qos1)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
            </table>
          </td></tr>
          <tr><th class="block"><div class="r90">QoS 2</div></th><td>
            <table>
              <tr><th>&nbsp;</th><th class="block">20 b Message</th><th class="block">1 k Message</th><th class="block">256 k Message</th></tr>
              <tr><th class="block"><div class="r90">1x1x1</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_20b:(1 * clean qos2)->[1]->(1 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_20b:(1 * clean qos2)->[1]->(1 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_20b:(5 * clean qos2)->[5]->(5 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_20b:(5 * clean qos2)->[5]->(5 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_20b:(10 * clean qos2)->[10]->(10 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_20b:(10 * clean qos2)->[10]->(10 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">5x5x5</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_1k:(1 * clean qos2)->[1]->(1 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_1k:(1 * clean qos2)->[1]->(1 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_1k:(5 * clean qos2)->[5]->(5 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_1k:(5 * clean qos2)->[5]->(5 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_1k:(10 * clean qos2)->[10]->(10 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_1k:(10 * clean qos2)->[10]->(10 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">10x10x10</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_256k:(1 * clean qos2)->[1]->(1 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_256k:(1 * clean qos2)->[1]->(1 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_256k:(5 * clean qos2)->[5]->(5 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_256k:(5 * clean qos2)->[5]->(5 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_256k:(10 * clean qos2)->[10]->(10 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_256k:(10 * clean qos2)->[10]->(10 * clean qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>

            </table>
          </td><td>
            <table>
              <tr><th>&nbsp;</th><th class="block">20 b Message</th><th class="block">1 k Message</th><th class="block">256 k Message</th></tr>
              <tr><th class="block"><div class="r90">1x1x1</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_20b:(1 * dirty qos2)->[1]->(1 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_20b:(1 * dirty qos2)->[1]->(1 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_20b:(5 * dirty qos2)->[5]->(5 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_20b:(5 * dirty qos2)->[5]->(5 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_20b:(10 * dirty qos2)->[10]->(10 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_20b:(10 * dirty qos2)->[10]->(10 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">5x5x5</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_1k:(1 * dirty qos2)->[1]->(1 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_1k:(1 * dirty qos2)->[1]->(1 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_1k:(5 * dirty qos2)->[5]->(5 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_1k:(5 * dirty qos2)->[5]->(5 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_1k:(10 * dirty qos2)->[10]->(10 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_1k:(10 * dirty qos2)->[10]->(10 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">10x10x10</div></th><td>
                <h4 class="chart-title">Producer Rates (msg/s):</h4>
                <div id='p_par_256k:(1 * dirty qos2)->[1]->(1 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">Consumer Rates (msg/s):</h4>
                <div id='c_par_256k:(1 * dirty qos2)->[1]->(1 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_256k:(5 * dirty qos2)->[5]->(5 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_256k:(5 * dirty qos2)->[5]->(5 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_par_256k:(10 * dirty qos2)->[10]->(10 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='c_par_256k:(10 * dirty qos2)->[10]->(10 * dirty qos2)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
            </table>
          </td></tr>
        </table>
  <!--
        <h2 id="request_reply">Request/Reply Scenarios</h2>
        <p>
          In this scenario publishers send a request message with a 20 byte body to a topic the subscribers are subscribed to and then 
          waits for response on a topic unique to each publisher.  The request message contains the topic which
          which the publisher is will wait for the response on.  Consumers are receive the request 
          message and send a response message without a body to the topic specified on the request.  The
          99.9th percentile latency is measured using the time elapsed from when the publisher sends 
          the request message to when the publisher receives the response message.
        </p>
        <table class="charts">
          <tr><th>&nbsp;</th><th class="block">Clean</th><th class="block">Non Clean</th></tr>
          <tr><th class="block"><div class="r90">Queue</div></th><td>
            <table>
              <tr><th>&nbsp;</th><th class="block">1 Producer</th><th class="block">10 Producers</th><th class="block">100 Producers</th></tr>
              <tr><th class="block"><div class="r90">1 Consumer</div></th><td>
                <h4 class="chart-title">Request Rates (r/s):</h4>
                <div id='p_rr_20b:(1 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">99.9th % Latency (ms):</h4>
                <div id='p999_rr_20b:(1 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_rr_20b:(10 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='p999_rr_20b:(10 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_rr_20b:(100 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='p999_rr_20b:(100 * clean qos0)->[1]->(1 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">5 Consumers</div></th><td>
                <h4 class="chart-title">Request Rates (r/s):</h4>
                <div id='p_rr_20b:(1 * clean qos0)->[1]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">99.9th % Latency (ms):</h4>
                <div id='p999_rr_20b:(1 * clean qos0)->[1]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_rr_20b:(10 * clean qos0)->[1]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='p999_rr_20b:(10 * clean qos0)->[1]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_rr_20b:(100 * clean qos0)->[1]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='p999_rr_20b:(100 * clean qos0)->[1]->(5 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">10 Consumers</div></th><td>
                <h4 class="chart-title">Request Rates (r/s):</h4>
                <div id='p_rr_20b:(1 * clean qos0)->[1]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">99.9th % Latency (ms):</h4>
                <div id='p_rr_20b:(1 * clean qos0)->[1]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_rr_20b:(10 * clean qos0)->[1]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='p999_rr_20b:(10 * clean qos0)->[1]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_rr_20b:(100 * clean qos0)->[1]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='p999_rr_20b:(100 * clean qos0)->[1]->(10 * clean qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
            </table>
          </td><td>
            <table>
              <tr><th>&nbsp;</th><th class="block">1 Producer</th><th class="block">5 Producers</th><th class="block">100 Producers</th></tr>
              <tr><th class="block"><div class="r90">1 Consumer</div></th><td>
                <h4 class="chart-title">Request Rates (r/s):</h4>
                <div id='p_rr_20b:(1 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">99.9th % Latency (ms):</h4>
                <div id='p999_rr_20b:(1 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_rr_20b:(10 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='p999_rr_20b:(10 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_rr_20b:(100 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='p999_rr_20b:(100 * dirty qos0)->[1]->(1 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">5 Consumers</div></th><td>
                <h4 class="chart-title">Request Rates (r/s):</h4>
                <div id='p_rr_20b:(1 * dirty qos0)->[1]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">99.9th % Latency (ms):</h4>
                <div id='p999_rr_20b:(1 * dirty qos0)->[1]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_rr_20b:(10 * dirty qos0)->[1]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='p999_rr_20b:(10 * dirty qos0)->[1]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_rr_20b:(100 * dirty qos0)->[1]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='p999_rr_20b:(100 * dirty qos0)->[1]->(5 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
              <tr><th class="block"><div class="r90">10 Consumers</div></th><td>
                <h4 class="chart-title">Request Rates (r/s):</h4>
                <div id='p_rr_20b:(1 * dirty qos0)->[1]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <h4 class="chart-title">99.9th % Latency (ms):</h4>
                <div id='p_rr_20b:(1 * dirty qos0)->[1]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_rr_20b:(10 * dirty qos0)->[1]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='p999_rr_20b:(10 * dirty qos0)->[1]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td><td>
                <div id='p_rr_20b:(100 * dirty qos0)->[1]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
                <div id='p999_rr_20b:(100 * dirty qos0)->[1]->(10 * dirty qos0)' class="small-chart"><img src="./resources/ajax-loader.gif"></div>
              </td></tr>
            </table>
          </td></tr>
        </table>        
-->
      </div>
    </div>
  </body>
</html>
